<template>
    
    <viewer ref="viewer" :images="srcList" class="pic-block">
        <div class="pic-div" v-for="(item, index) in srcList" :key="index">
            <img class="pic-item"
            :src="item['download_url']"
            :data-source="getDataSrc(item['download_url'])"
            :key="index"
            />
        </div>
    </viewer>
</template>

<script>
export default {
    name: 'pic-block',
    props: {
        srcList: {
            type: Array,
            default() {
                return []
            }
        },
        fit: {
            type: String,
            default: 'cover'
        },
        title: {
            type: String,
            default: '-'
        }
    },
    methods: {
        getDataSrc(item) {
            if(item) {
                return item.replace("-th/", "/");
            } else {
                return ''
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.pic-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    flex: 1;
    position: relative;
    .pic-div {
        .pic-item {
            width: 105px;
            height: 105px;
        }
    }
}
</style>